<template>
  <div class="container">
    <div class="head">
      <header @click="goback">
        <i class="iconfont">&#xe620;</i>
        <span class="name">{{songdetail.name}}</span>
      </header>
      <div class="inner-content">
        <div class="left">
          <img :src="songdetail.coverImgUrl" alt="">
          <div class="play-count">
            <i class="iconfont"></i>
            <span class="count">{{songdetail.playCount > 99999999 ?
              parseInt(songdetail.playCount/100000000) + '亿' : parseInt(
                songdetail.playCount/10000) + '万'}}</span>
          </div>
        </div>
        <div class="right">
          <p class="name">{{songdetail.name}}</p>
          <div class="desc">{{songdetail.description}}</div>
        </div>
        <div class="bottom">
          <ul class="icon-list">
            <li class="icon">
              <i class="iconfont">&#xe625;</i>
              <p class="exact-desc">评论数量</p>
            </li>
            <li class="icon">
              <i class="iconfont">&#xe77d;</i>
              <p class="exact-desc">分享数量</p>
            </li>
            <li class="icon">
              <i class="iconfont">&#xe631;</i>
              <p class="exact-desc">下载</p>
            </li>
            <li class="icon">
              <i class="iconfont">&#xe62e;</i>
              <p class="exact-desc">多选</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="all">
      <i class="iconfont">&#xe63a;</i>
      <span class="allin">播放全部</span>
      <span class="allnum">共({{songdetail.trackCount}})首歌</span>
    </div>
    <div class="song-list">
      <div class="list-item" v-for="(item, index) in songdetail.tracks" :key="index"
      @click="fullplay(index, songdetail.tracks,item.id)"
      >
        <div class="left-item">{{index + 1}}</div>
        <div class="right-item">
          <p class="name">{{item.name}}</p>
          <p class="name ar ell">
            <span class="ell" v-for="val in item.ar" :key="val.id">{{val.name}}</span>-
            <span class="ell">{{item.al.name}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'song',
  data () {
    return {
      songdetail: {}
    }
  },
  methods: {
    goback () {
      window.history.go(-1)
    },
    getdetail () {
      this.axios.get('/api/top/list?idx=' + this.$store.state.idx).then((res) => {
        console.log(res.data)
        if (res.data.code === 200) {
          this.songdetail = res.data.playlist
        }
      })
    },
    fullplay (index, alllist, id) {
      const that = this
      // 点击某首歌时，需要索引和全部歌曲
      this.$store.commit('fullplay', { index, alllist }) // 歌曲信息存到仓库
      this.$store.dispatch('getUrl', { that, id })
    }
  },
  mounted () {
    if (this.$route.params.list) {
      this.songdetail = this.$route.params.list
    } else {
      this.getdetail()
    }
  }
}
</script>
<style lang="stylus" scoped>
.ell
  overflow hidden
  white-space nowrap
  text-overflow: ellipsis
.ar
  font-size .22rem
  color #999
  span
    width 1.4rem
    // float left
.song-list
  padding 0 .3rem
  .list-item
    height 1.2rem
    width 100%
    display flex
    .left-item
      width .5rem
      line-height 1.2rem
    .right-item
      flex 1
      overflow hidden
      .name
        line-height 2
.all
  height 1rem
  padding 0 .3rem
  line-height 1rem
  font-size .3rem
  .allnum
    font-size .22rem
    margin-left .1rem
    color #999
.icon-list
  display flex
  height 100%
  color white
  .icon
    flex 1
    text-align center
    display flex
    flex-direction column
    justify-content space-around
.head
  background #ee5253
  padding 0 .3rem
  header
    line-height 1rem
    color white
  .iconfont
    font-size .4rem
    margin 0 .3rem
.inner-content
  display flex
  flex-wrap wrap
  height 5rem
  background #ee5253
  justify-content space-between
  .left
    width 2.6rem
    height 3rem
    position relative
    .count
      position absolute
      right .1rem
      top .1rem
      color white
    img
      width 100%
  .right
    width 3.6rem
    height 3rem
    .name
      color white
    .desc
      color #ccc
      text-overflow: ellipsis
      display: -webkit-box
      -webkit-line-clamp: 6
      overflow: hidden
      -webkit-box-orient: vertical
  .bottom
    width 100%
    height 1rem
</style>
